import styled from "styled-components"
import Nav from "components/Nav";
import useTodolist from '../useTodolist';
import { useState } from 'react';

require('../assets/icons/logo.svg')
require('../assets/icons/delete.svg')
require('../assets/icons/set.svg')

const Wrapper=styled.div`
    display:flex;
    flex-direction:column;
    height:100vh;
`
const Main=styled.div`
    flex-grow:1;
    overflow:auto;
    background:white;
    overflow:auto;
    
  >.topNav{
    display:flex;
    padding:0px 30px;
    padding-top:20px;
    justify-content: space-between;
    align-items:center;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    background:#f3f3f3;
    >.logo{
        display:flex;
        align-items:center;
        >.icon{
            margin-right:10px;
            fill:#45496a;
        }
    }
  }
  >.bar{
    height:20px;
    width:100vw;
    border-radius:0px 0px 100px 100px;
    margin-bottom:10px;
    background:#f3f3f3;
  }
  >.list{
    padding:10px;
    >.value{
        display:flex;
        flex-direction:column;
        >.date-wrapper{
            display:flex;
            background-color: rgba(235, 231, 231, 0.5);
            padding:10px;
            align-items:center;
            >.delete{
                margin-right:10px;
            }
            >.date{
                margin-right:10px;
            }  
        }
        >.note{
            padding:20px 10px;
        }
    }
  }
`   
const Todolist =()=>{
    const {getTodolist,rmTodolist,setTodolist}=useTodolist();
    let a = getTodolist()
    const[list,setList]=useState(a)
    const rmList=(index:number)=>{
        rmTodolist(index)
        let a=getTodolist()
        setList([...a])
    }
    const newVal=(time:string,oldVal:string)=>{
        let a =window.prompt('请输入新的待办信息')
        if(a===null){
            return
        }else{
            setTodolist(time,oldVal,a)
            let b=getTodolist()
            setList([...b])
        }  
    }
    return (
        <Wrapper>
            <Main>
            <div className="topNav">
                    <div className="logo"> 
                        <svg  className="icon" >
                            <use xlinkHref="#logo" />
                        </svg> 
                        <div>待办</div>
                    </div>            
                </div>
                <div className="bar"></div>
                <div className="list">
                    {
                        list.map((items,index)=>{
                            return (
                            <div className="value" key={index}>
                                <div className="date-wrapper">
                                    <div className="date" >{Object.keys(items)}</div>
                                    <div className="delete" onClick={()=>{rmList(index)}}>
                                        
                                        <svg  className="icon" >
                                            <use xlinkHref="#delete" />
                                        </svg> 
                                       
                                    </div>
                                    <div className="set" onClick={()=>{newVal(Object.keys(items)[0],Object.values(items)[0])}}>
                                        
                                        <svg  className="icon" >
                                            <use xlinkHref="#set" />
                                        </svg> 
                                        
                                        
                                    </div>
                                </div>
                                
                                <div className='note'>{Object.values(items)}</div>
                            </div>) 
                        })
                    }
                </div>
            </Main>
            <Nav></Nav>
        </Wrapper>
    )
}

export default Todolist;